<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Grid - Sizes</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Grid - Sizes</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content" class="grid-demo">
        <h2 class="ion-padding-start">10 Column Layout</h2>
        <ion-grid class="grid-10">
          <ion-row id="row10"></ion-row>
        </ion-grid>

        <h2 class="ion-padding-start">Responsive sm</h2>
        <ion-grid>
          <ion-row>
            <ion-col size="12" size-sm>
              <div>ion-col</div>
            </ion-col>
            <ion-col size="12" size-sm>
              <div>ion-col</div>
            </ion-col>
            <ion-col size="12" size-sm>
              <div>ion-col</div>
            </ion-col>
            <ion-col size="12" size-sm>
              <div>ion-col</div>
            </ion-col>
          </ion-row>
        </ion-grid>

        <h2 class="ion-padding-start">Size auto</h2>
        <ion-grid>
          <ion-row>
            <ion-col>
              <div>ion-col</div>
            </ion-col>
            <ion-col size="auto">
              <div>ion-col with extra text to make it auto</div>
            </ion-col>
            <ion-col>
              <div>ion-col</div>
            </ion-col>
            <ion-col>
              <div>ion-col</div>
            </ion-col>
          </ion-row>
        </ion-grid>

        <h2 class="ion-padding-start">Breakpoint Sizes</h2>
        <ion-grid>
          <ion-row>
            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
            </ion-col>
            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
            </ion-col>
            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
            </ion-col>
            <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
              <div>ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"</div>
            </ion-col>
          </ion-row>
        </ion-grid>

        <ion-grid>
          <ion-row>
            <ion-col size="2">
              <div>ion-col size="2"</div>
            </ion-col>
            <ion-col size="1">
              <div>ion-col size="1"</div>
            </ion-col>
            <ion-col size="2">
              <div>ion-col size="2"</div>
            </ion-col>
            <ion-col size="3">
              <div>ion-col size="3"</div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>

      <script>
        let cols = [];
        const sizes = [1, 3, 3, 2, 1];

        for (var i = 0; i < sizes.length; i++) {
          const col = `
          <ion-col size="${sizes[i]}">
            <div>
              ion-col size ${sizes[i]}
            </div>
          </ion-col>
        `;

          cols.push(col);
        }
        const grid = document.getElementById('row10');

        grid.innerHTML = cols.join('');
      </script>

      <style>
        .grid-demo ion-col div {
          background-color: #f7f7f7;
          border: 1px solid #ddd;
          padding: 10px 5px;
        }

        .grid-10 {
          --ion-grid-columns: 10;
        }
      </style>
    </ion-app>
  </body>
</html>
